<template>
    <div id="chart" class="wrapper">
      <!-- 系统数据 -->
    </div>
  </template>
  
  <script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

const sysData = ref([]);

const systemData = async () => {
  try {
    const res = await axios.get('http://localhost:8080/systemdata');
    if (res.data.code === 0) {
      sysData.value = res.data.data;
      draw(sysData.value);
    } else {
      console.log(res.data.message);
    }
  } catch (error) {
    console.error(error);
  }
};

const draw = (sys) => {
  const chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    title: { text: '系统数据' },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    color: ['#9b59b6'],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '讲师',
          '学生',
          '班级',
          '教室',
          '教学楼',
          '教材',
          '排课任务',
          '新增学生',
          '新增讲师',
        ],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: '60%',
        data: [
          sys.teachers,
          sys.students,
          sys.classes,
          sys.classrooms,
          sys.teachbuilds,
          sys.courses,
          sys.classtasks,
          sys.studentReg,
          sys.teacherReg,
        ],
      },
    ],
  });
};

onMounted(() => {
  systemData();
});
</script>
  
  <style lang="less" scoped>
  // .wrapper {
  //   margin: 0;
  //   padding: 0;
  //   position: absolute;
  //   width: 85%;
  //   height: 80%;
  // }


  .wrapper {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 85%;
  height: 80%;
  // 添加背景颜色为浅紫色
  //background-color: #E6E6FA; /* 浅薰衣草色，一种淡紫色，可根据喜好调整 */
  // 为了更好的视觉体验，可以给组件内部添加一些边距或圆角
  border-radius: 10px;
  padding: 20px;
}

// 如果需要，也可以单独为图表区域设置背景颜色

  </style>
  